<template>
  <div>
    <!-- 头部tab -->
    <!-- <div class="top_tab">
      <div class="left" @click="back()">
        <img  src="../assets/order_center/shangs.png">
      </div>
      <span>设置</span>
      <div class="right">
      </div>
    </div>
		<div style="height:.1rem;"></div> -->
    <div class="photo">
		<div class="ft">
			<span>图像</span>
			<div class="pic">
				<!-- <img src="../assets/set/touxiang.jpg" alt=""> -->
				<el-upload
					class="avatar-uploader"
					action="/api/finance/changeImg"
					:data="{token:token,user_id:myid}"
					:show-file-list="false"
					:on-success="handleAvatarSuccess"
					:before-upload="beforeAvatarUpload">
					<img v-if="imageUrl" :src="imageUrl" class="avatar">
					<i v-else class="el-icon-plus avatar-uploader-icon"></i>
				</el-upload>
			</div>
		</div>
    </div>
		<div class="address">
			<span>昵称</span>
			<span><input type="text" v-model="name" @blur="names()"></span>
		</div>
		
		<div class="center">
				<div class="box">
				<div class="info s" @click="bankcarClick()">
					<span>我的银行卡</span>
					<img src="../assets/set/next.png" alt="">	
				</div>
			</div>
			<div class="box">
				<div class="info" @click="addressClick()">
					<span>我的收货地址</span>
					<img src="../assets/set/next.png" alt="">	
				</div>
			</div>

			<div class="box">
				<div class="info" @click="set_phoneClick()">
					<span>修改手机号码</span>
					<img src="../assets/set/next.png" alt="">	
				</div>
			</div>
			<div class="box">
				<div class="info" @click="ChangePasswordClick()">
					<span>修改安全密码</span>
					<img src="../assets/set/next.png" alt="">	
				</div>
			</div>
			<!-- <div class="box">
				<div class="info" @click="setpwdClick()">
					<span>设置登录密码</span>
					<img src="../assets/set/next.png" alt="">	
				</div>
			</div> -->
		
		</div>
		<!-- <div class="center">
			<div class="box">
				<div class="info" @click="informClick()">
					<span>音效与通知</span>
					<img src="../assets/set/next.png" alt="">	
				</div>
			</div>
			<div class="box">
				<div class="info s">
					<span>当前版本</span>
					<div>
						<span>V 1.1.3</span>
						<img src="../assets/set/next.png" alt="">	
					</div>
				</div>
			</div>
		</div> -->
		<!-- <button @click="tuichu()">退出当前账户</button> -->
  </div>
</template>

<script>
import Vue from 'vue';
import {Tab, TabPanel} from 'vue-ydui/dist/lib.rem/tab';
Vue.component(Tab.name, Tab);
Vue.component(TabPanel.name, TabPanel);
export default {
  name: 'set',
  data () {
    return {
     index:0,
		 isshow:false,
		 name:"",
		 imageUrl: ''
    }
  },
  methods:{
    back: function() {
      this.$router.go(-1);
		},
		addressClick:function(){
			this.$router.push("address");
		},
		set_phoneClick:function(){
			this.$router.push("set_phone");
		},
		setpwdClick:function(){
			this.$router.push("setpwd");
		},
		informClick:function(){
			this.$router.push("inform");
		},
		bankcarClick:function(){
			this.$router.push("bankcar");
		},
		ChangePasswordClick:function(){
			this.$router.push("ChangePassword");
		},
		handleAvatarSuccess(res, file) {
			this.imageUrl = URL.createObjectURL(file.raw);
		},
		beforeAvatarUpload(file) {
			const isJPG = file.type === 'image/jpeg';
			const isGif = file.type === 'image/gif';
			const isPNG = file.type === 'image/png'; 

			const isLt2M = file.size / 1024 / 1024 < 20; 
			if (!isJPG&& !isPNG && !isGif) {
				this.$dialog.toast({mes:"只能是JPG,Png,gif格式!"});
			}
			if (!isLt2M) {
				this.$dialog.toast({mes:"上传图片不能大于20M"});

			}
			return isJPG && isLt2M || isPNG ||isGif;
		},
		//获取姓名和图像
		 de:function(){
      let self = this;
      let url = "/api/login/detail"; 
			self.httpPost(url,{user_id:this.myid,token:this.token},function(res) {
				if (res.code === 200) {
					self.imageUrl=res.data.appimage;
					self.name = res.data.name;
				}
      })
		},
		names(){
			let self = this;
      let url = "/api/login/updatename"; 
			self.httpPost(url,{user_id:this.myid,token:this.token,nickname:this.name},function(res) {
				if (res.code == 200) {
					self.$dialog.toast({mes:res.msg});
					self.de()
				}
      })
		},
		tuichu(){
			let self = this;
			this.$dialog.confirm({
					title: '是否退出当前账号？', 
					opts: () => {
						localStorage.removeItem("mytoken");
						localStorage.removeItem("myid");
						setTimeout(() => {
							self.$router.push("/login"); 
						}, 1000);
					}
			});
		}
	},
	created(){
    document.title = "设置";
    this.token = localStorage.getItem('mytoken');
		this.myid = localStorage.getItem('myid');
		this.de(); 
  },
}
</script>


<style scoped>

.top_tab{
  width:100%;
  padding:.2rem .3rem;
  background: #FFF;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: .01rem .01rem .06rem #ddd;
  margin-bottom: .01rem;
}
.top_tab span{
  color:#333;
  font-size: .36rem;
}
.top_tab .right{
	width: 1rem;
	display: flex;
	justify-content: space-between;
}
.top_tab  img{
  width:.43rem;
}
.photo{
	width:100%;
	height:1.8rem;
	background: #FFF;
	padding: 0 .3rem;
}
.photo .ft{
	width:100%;
	height:100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	border-bottom: 1px solid #eee;
}
.photo .ft .pic{
	width: 1.2rem;
	height:1.2rem;
	border-radius: 50%;
}
.photo .ft .pic img{
	width: 1.2rem;
	border-radius: 50%;
	height: 1.2rem;
}
.photo .ft span{
	font-size: .32rem;
	color:#333;
}
.address{
	width:100%;
	height:1.08rem;
	background: #FFF;
	display: flex;
	padding: 0 .3rem;
	justify-content: space-between;
	align-items: center;
}
.address span{
	font-size: .28rem;
	color:#333;
}
.address img{
	width:.18;
	height:.30rem;
	vertical-align: middle;
}
.center{
	width:100%;
	margin-top: .2rem;
}
.center .box{
	width:100%;
	height:1.08rem;
	background: #FFF;
	display: flex;
	padding: 0 .3rem;
	justify-content: space-between;
	align-items: center;
}
.center .box .info{
	width:100%;
	height:100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	border-bottom: 1px solid #eee;
}
.s{
	border: none !important;
}
.center .box .info span{
	font-size: .28rem;
	color:#333;
	vertical-align: middle;
}
.center .box .info img{
	width:.18;
	height:.30rem;
	vertical-align: middle;
}
button{
	width: 100%;
  height:1rem;
  position: fixed;
  bottom: 0;
  z-index: 9999999;
	background: #e63f3f;
	border:none;
	font-size: .30rem;
	color:#FFF;
}
.address input{
	border: none;
	text-align: right;
	color: #333;
}
</style>
<style>
  .pic .avatar-uploader .el-upload {
    /* border: 1px dashed #d9d9d9; */
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .pic .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .pic .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 1.2rem;
    height: 1.2rem;
    line-height:1.2rem;
    text-align: center;
  }
  .pic .avatar {
    width: 1.2rem;
    height: 1.2rem;
    display: block;
  }
</style>
